<template>
    <div id="nav">
        <div class="logoBox"></div>
        <div class="bgs"></div>
        <div class="breadcrumb">
            <div class="box-card">
                <el-breadcrumb separator="/">
                    <el-breadcrumb-item v-for="(level,index)  in levelList" :key="index" :to="level.path">
                    <span style="color:#367fff;font-size:16px;">{{level.name}}</span>
                    </el-breadcrumb-item>
                </el-breadcrumb>
            </div>
        </div>
        <div class="user">
            <span class="user_name">{{username}}</span>
            <span class="user_off" style="width: 1px;"></span>
            <span class="icon-tuichu" @click="outlogin"></span>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return {
            username:'pengxl',
            showPimbox:false,
            showClient:false,
            ClientBox:[],
            levelList:[]
        }
    },
    created(){
        this.getBreadcrumb();

        this.username = this.Cookie.get('ISLOGINZ');
    },
    methods:{
        getBreadcrumb(){
             // 1.获取当前的name,path,breadNumber
            var newName = this.$route.name;
            var newPath = this.$route.fullPath;
            var newBreadNum = this.$route.meta.breadNumber;   

            // 2.获取前一页存下的name,path,breadNumber
            var routerInfo =  JSON.parse(window.sessionStorage.getItem("routerInfo")) || [];     
            this.levelList = routerInfo;     
            
            // 3.判断是否是第一层，即初始位置，如果是第一层，分两种情况
            if(this.$route.meta.breadNumber === 1){
            // 3.1 sessionStorage有值，那么this.levelList不是空值，说明是由上一个主路由进来的，需要清空之前sessionStorage的值，并且重新赋值给levelList
                if(this.levelList.length != 0 ){
                sessionStorage.removeItem("routerInfo");
                this.levelList = [];            
                }
            // 3.2 sessionStorage没有值，说明就是第一次进主路由，直接赋值
                this.levelList.push({"name":newName,"path":newPath,"breadNumber":newBreadNum});
                // 按照数组格式的方式存放
                window.sessionStorage.setItem("routerInfo",JSON.stringify(this.levelList));
                        
            }else{  
                var isBreadNumber = false;   
                // 4.breadNumber除了等于1，其他值时，this.levalList一定不是空值，判断点击的这个breadNumber数组中是否存在
                // 4.1 如果存在，就要删掉这个后面的所有值，并且将点击所获得的的这个值存进this.levalList数组中
                // 4.2 如果不存在，说明是按照顺序进行的，把它存到sessionStorage中，并把值给this.leavalList数组
                //在这里不用return，否则会终止循环
                for(var i = 0 ;i< this.levelList.length; i++){
                    if(this.levelList[i].breadNumber == newBreadNum){
                    // return true; // 为true时表示数组内已存在 false表示不存在
                    isBreadNumber = true;
                    break;
                    }
                }
                if( isBreadNumber ){
                    //删除点击的后面所有信息，sessionStorage中的数据也要删除（这里的删除是截取，而不是完全删除），然后将该信息添加进去        
                    //要注意的是，这里的变化还有可能是点击面包屑时产生的，其他地方通常是通过路由跳转得到的           
                    // 注意这里splice的用法，如果直接写在sessionStorage.setItem 中，得到的值是被截取的值，而不是截取后的值
                    routerInfo.splice( newBreadNum,routerInfo.length-newBreadNum);
                    window.sessionStorage.setItem("routerInfo",JSON.stringify( routerInfo ))
                    
                }else{ this.levelList.push({"name":newName,"path":newPath,"breadNumber":newBreadNum});
                    window.sessionStorage.setItem("routerInfo",JSON.stringify(this.levelList));     
                }
            }
        },
        outlogin(){
            this.$confirm('此操作将退出登录, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.Cookie.remove('accessToken','/');
               this.$router.push({ path: "/login" });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消'
                });          
            });
            }
    },
    mounted(){
        this.$nextTick(() => {
            document.querySelector('body').addEventListener('click', this.isClosebox);
        });
    },
    beforeDestroy(){
        document.querySelector('body').removeEventListener('click', this.isClosebox);
    },
    watch: {
        $route() {
            this.getBreadcrumb()
        }
    }
}
</script>

<style scoped>
#nav{
    height: 76px;
    background:#fff;
    position: relative;
}
#nav .logoBox{
    width: 247px;
    height: 83px;
    background: url('../../assets/logo.png') no-repeat;
    background-size:100% 100%;
    position: fixed;
    z-index: 10;
    top: 0;left: 0;
    cursor: pointer;
}
#nav .bgs{
    width: 240px;
    height: 76px;
    background: #455fe7;
    float: left;
}
.breadcrumb{
    float: left;
    margin-left:50px;
    line-height: 76px;
}
.el-breadcrumb__item{
    line-height: 76px;
    
}
.el-breadcrumb__item:last-child .el-breadcrumb__inner{
    color: #367fff!important;
}
#nav .user{
    float: right;
    height: 76px;
}
#nav .user span{
    display: inline-block;
    float: left;
    font-family: '黑体';
}
#nav .user .user_name{
    line-height: 76px;
    font-size: 15px;
    margin-right:20px;
    color: #414141;
    cursor: pointer;
}
#nav .user .user_off{
    height:26px;
    background: #eee;
    margin-top: 25px;
}
#nav .user .user_back{
    width: 70px;
    height: 76px;
    line-height: 76px;
    text-align: center;
    font-size: 16px;
    cursor: pointer;
}
#nav .icon-tuichu{
    line-height: 76px;
    text-align: center;
    display: inline-block;
    width: 20px;
    height: 20px;
    background-color: #333333;
    -webkit-mask: url('../../assets/back.svg') no-repeat;
    mask: url('../../assets/back.svg') no-repeat;
    mask-size:100% 100%;
    vertical-align: middle;
    margin:28px 20px 28px 25px;
    cursor: pointer;
}
</style>